<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./base/animate.css">
</head>
<style>
    .box{
        width: 200px;
        height: 200px;
        background: red;
    }


    @keyframes abc{
        0%{
            width:50px;
        }
        30%{
            width:80px;
        }
        70%{
            width:230px
        }
        100%{
            width:10px
        }
    }

    .abc{
        -webkit-animation-name: abc;
        animation-name: abc;
    }
</style>
<body>
    
    <div id="app">
        <aaa></aaa>
    </div>
    <template id="a">
        <div>
            <button @click="isShow=!isShow">toggle</button>
            <transition
                enter-active-class="animated flipOutY"
                leave-active-class="animated abc"
            >
                <div class="box" v-if="isShow"></div>
            </transition>
        </div>
    </template>
    
    

</body>
<script src="./base/vue.js"></script>

<script>
    //transition-group最外层渲染了一个span标签   
    //template  transition是外面不会渲染额外的标签
    // 如果是一组元素做动画的时候，需要使用transition-group，
    //并且需要有key
    // 推荐大家使用animate.css 动画库

    Vue.component("aaa",{
        template:"#a",
        data(){
            return {
                isShow:true
            }
        }
    })
    new Vue({
        el:"#app"
    })


    



</script>
</html>